<template>
  <div class="assign-role">
    <div class="role-list">
      <!-- 角色列表 -->
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="item in list" :key="item.id" :label="item.id">
          {{ item.name }}
        </el-checkbox>
        <!-- <el-checkbox label="复选框 A" />
        <el-checkbox label="复选框 B" />
        <el-checkbox label="复选框 C" />
        <el-checkbox label="禁用" disabled />
        <el-checkbox label="选中且禁用" disabled /> -->
      </el-checkbox-group>
    </div>
    <div class="role-btns">
      <el-button type="primary" round @click="onSubmit">确定</el-button>
      <el-button round @click="cancel">取消</el-button>
    </div>
  </div>
</template>
<script>
import { getRolesListRequest } from '@/api/setting'
import { assignRoleRequest, userPhotoRequest } from '@/api/user'
export default {
  name: '',
  props: {
    currentId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 多选框列表
      list: [],
      // 多选框被选中的列表
      checkList: []
    }
  },
  created() {
    // 调用渲染员工信息方法
    this.getUserList()
  },
  methods: {
    async getUserList() {
      // console.log(111)
      try {
        const res = await getRolesListRequest({ page: 1, pagesize: 1000 })
        console.log('获取所有人权限', res)
        if (res.success) {
          this.list = res.data.rows
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
        // 根据id获取员工权限
        console.log(this.currentId)
        const info = await userPhotoRequest(this.currentId)
        console.log('userPhotoRequest: ', info)
        if (info.success) {
          this.$message.success(info.message)
          this.checkList = info.data.roleIds || []
        } else {
          this.$message.error(info.message)
        }
      } catch (error) {
        this.$message.error('获取员工列表失败')
      }
    },
    cancel() {
      this.$emit('close')
    },
    async assignRole() {
      try {
        const res = await assignRoleRequest({
          id: this.currentId,
          roleIds: this.checkList
        })
        console.log('assignRoleRequest: ', res)
        if (res.success) {
          this.$message.success(res.message)
          this.getUserList()
          this.cancel()
        } else {
          this.$message.error(res.message)
        }
      } catch (err) {
        console.log('assignRoleRequest: ', err)
      }
    },
    onSubmit() {
      this.assignRole()
    }
  }
}
</script>
<style lang="scss" scoped>
.role-btns {
  text-align: right;
  margin-top: 20px;
}
</style>
